<template>
  <el-dialog v-model="isShow" draggable :close-on-click-modal="false">
    <el-form-item class="tree-content">
      <TreeFilter
        ref="treeFilterRef"
        :multiple="true"
        label="title"
        :title="$t('message.menuInfo.title')"
        :default-value="handleMenuId"
        :data="menuTreeData"
        @change="handleCheckChange"
        :need-half-checked-data="true"
      />
    </el-form-item>
    <template #footer>
      <div class="footer-buttons">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts" name="GrantMenu">
import menuApi from "@/api-services/apis/system/menuApi";
import roleApi from "@/api-services/apis/system/roleApi";
import { SysMenu } from "@/api-services/models/system";
import TreeFilter from "@/components/TreeFilter/index.vue";
import { feature } from "@/utils/axios-utils";
import { NotificationError, NotificationSuccess } from "@/utils/notification";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const treeFilterRef = ref<InstanceType<typeof TreeFilter> | null>(null);
const isShow = ref(false);
const ownMenuId = ref<number[]>();
const menuTreeData = ref<SysMenu.SysMenu[]>();
const roleId = ref<number>();
const handleMenuId = ref<number[]>([]);
const openGrantMenu = async (id: number) => {
  isShow.value = true;
  roleId.value = id;
  //查询角色已授权菜单
  let ownMenu = await roleApi.getOwnMenu({ id: id });
  //查询菜单列表
  let menuTree = await menuApi.getMenuTree();
  ownMenuId.value = ownMenu.data.data;
  menuTreeData.value = menuTree.data.data;
  handleMenuId.value = computedHandleMenuId.value;
};

// 计算已授权菜单中没有子菜单的菜单 ID
const computedHandleMenuId = computed(() => {
  const result: number[] = [];
  ownMenuId.value?.forEach(id => {
    const menu = findMenuById(id);
    if (!menu?.children?.length) {
      result.push(id);
    }
  });
  return result;
});

// 根据菜单 ID 查找菜单对象
function findMenuById(id: number): SysMenu.SysMenu {
  const findMenu = (menus: SysMenu.SysMenu[]) => {
    for (const menu of menus) {
      if (menu.id === id) {
        return menu;
      }
      if (menu.children?.length) {
        const found = findMenu(menu.children);
        if (found) {
          return found;
        }
      }
    }
  };
  return findMenu(menuTreeData.value!);
}
const handleCheckChange = (val: number[]) => {
  ownMenuId.value = val;
};
const handleSubmit = async () => {
  const [err] = await feature(roleApi.grantRoleMenus({ id: roleId.value, menuList: ownMenuId.value }));
  if (err) {
    NotificationError(err.message);
  } else {
    NotificationSuccess(t("message.roleAlter.grantMenuSuccess"));
    close();
  }
};
const close = () => {
  isShow.value = false;
  ownMenuId.value = [];
};
defineExpose({ openGrantMenu });
</script>
<style lang="scss" scoped>
/* 在这里添加您的自定义样式 */
.filter {
  width: 100%; /* 修改宽度为 300px */
}
.menu-data-tree {
  width: 100%;
  padding: 5px;
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
}
.tree-content {
  height: 100%;
  max-height: 600px;
  overflow-y: auto;
  :deep(.el-tree-node > .el-tree-node__children) {
    overflow: inherit !important;
  }
}
:deep(.el-tree-node__children) {
  padding-left: 40px;
  line-height: 100%;
  white-space: pre-wrap;
  .el-tree-node {
    display: inline-block;
  }
  .el-tree-node__content {
    padding-right: 5px;
    padding-left: 5px !important;
  }
}
</style>
